<template>
  <div class="html-dialog">
    <van-dialog
      v-model="show"
      title=""
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <div class="html-dialog-content">
        <div class="html-dialog-head">
          {{title}}
          <img class="clear-img" v-if="clearImg" @click="show = false" src="@/assets/images/clear.png">
        </div>
        <div class="html-dialog-section">
          <slot></slot>
        </div>
      </div>
    </van-dialog>

  </div>
</template>
<!--组件式调用弹窗-->
<script>
  export default {
    name: 'html-dialog',

    props: {
      value: {
        type: Boolean,
        required: true
      },
      title: {
        type: String,
        default: '提示'
      },

      // 右上角关闭按钮
      clearImg: {
        type: Boolean,
        default: false
      }
    },

    components: {},

    data () {
      return {
        show: this.value
      }
    },

    watch: {
      value (newValue) {
        this.show = newValue
      },
      show (newValue) {
        this.$emit('input', newValue)
      }
    },

    methods: {}
  }
</script>

<style scoped lang="scss">
  .html-dialog {
    &-head {
      text-align: center;
      font-size: 18px;
      font-family: PingFangSC-Medium;
      font-weight: bold;
      color: rgba(54, 61, 78, 1);
      line-height: 25px;
      position: relative;

      .clear-img {
        position: absolute;
        width: 22px;
        height: 22px;
        right: -8px;
        top: -12px;
      }
    }

    &-content {
      padding: 20px 16px;

      .content {
        .money-list {
          padding: 16px;
          border-radius: 8px;
          background: $theme-bg-gray;

          li {
            margin-top: 8px;
          }

          .sum-money {
            padding-bottom: 16px;
            border-bottom: 1px solid $theme-border-color;
            margin-bottom: 16px;
            margin-top: 0;
          }

          span {
            color: $theme-blue;
          }
        }

        .flex-space-between {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .code-dsc {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          margin-top: 16px;

          label {
            font-size: 14px;
            line-height: 20px;
          }

          a {
            font-size: 12px;
            color: $theme-orange;
            line-height: 17px;
          }
        }

        .code {
          padding: 16px 0 10px;
          border-bottom: 1px solid $theme-border-color;

          input {
            width: 130px;
          }

          .button {
            button {
              width: 88px;
              font-size: 12px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              padding: 5px 0;
              line-height: 17px;
              border-radius: 4px;
            }
          }

          .button-default {
            button {
              color: $theme-gray;
              border: 1px solid $theme-border-color;
              background: $theme-white;
            }
          }
        }

        .hint {
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $theme-gray;
          line-height: 17px;
          margin-top: 10px;
        }

        .refund {
          margin-top: 20px;
        }
      }
    }

    &-section {
      margin-top: 16px;
    }
  }
</style>
